<!--
    group: 发票管理
    name: 发票列表-重开票
    url: /invoice/invoiceQueryReopen
-->
<template>
  <div class="main_content">
    <div class="header_invioce">
      <h3>重开票查询</h3>
      <a-button class="mLeft" type="primary" @click="invioceReopen">申请重开</a-button>
    </div>

    <a-tabs default-active-key="1" v-model="activeKey" @change="callback">
      <a-tab-pane v-for="item in astList" :key="item.key">
        <span slot="tab">{{ item.title }}</span>
        <InvoiceReopenItem v-if="activeKey == item.key" :key="timer" :businessStatus="item.id" />
      </a-tab-pane>
    </a-tabs>

    <!--申请重开-->
    <a-modal
      :width="800"
      :footer="null"
      @cancel="cancleTicket"
      v-model="invoiceVisible"
    >
      <h4>请选择需要重开的发票</h4>
      <div class="table-page-search-wrapper" style="margin-bottom: 10px">
        <a-form layout="inline">
          <a-row :gutter="24" style="margin-top: 10px">
            <a-col :md="16" :lg="14" :xl="12" :xxl="10">
              <a-form-item label="受票方">
                <a-input placeholder="请输入" v-model="filterList.taxTitle" />
              </a-form-item>
            </a-col>
            <a-col :md="8">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" icon="search" @click="handleSearch">搜索</a-button>
                <a-button style="margin-left: 10px" icon="reload" @click="handleReset">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
          <div class="table-page-search-wrapper" v-show="toggleSearchStatus">
            <a-row :gutter="24">
              <a-col :md="16" :lg="14" :xl="12" :xxl="10">
                <a-form-item label="开票方">
                  <a-input placeholder="请输入" v-model="filterList.entName" />
                </a-form-item>
              </a-col>
              <a-col :md="16" :lg="14" :xxl="10">
                <a-form-item label="发票时间">
                  <a-range-picker style="width: 200px;"
                                  v-model="filterList.time"
                                  @change="onChange"
                                  format="YYYY-MM-DD HH:mm:ss"
                                  :showTime="{defaultValue:[$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')]}"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </div>

      <a-table bordered
               :loading="loading"
               :pagination="false"
               :rowKey="row => row.id"
               :row-selection="{
                  type: 'radio',
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange
                }"
               :columns="columns"
               :data-source="tableData"
               :scroll="{x:400,y:300}"
      >
      </a-table>
      <a-pagination
        v-model="page.currentPage"
        :page-size-options="['5', '10', '20']"
        :show-total="total => `共 ${total} 条`"
        :total="page.totalCount"
        show-size-changer
        :page-size="page.pageSize"
        @showSizeChange="onSizeChange"
        @change="onPageChange"
      >
      </a-pagination>

      <div class="footer_invoice">
        <a-button @click="sure" class="btnsLarge" type="primary">确定</a-button>
      </div>
    </a-modal>

  </div>
</template>

<script>
import { getTaxInvoiceList } from '@/api/invoiceAdminister'
import InvoiceReopenItem from './modules/invoiceReopenItem'
import status from '@/utils/invoicingStatus'
export default {
  name: 'invoiceQueryReopen',
  components: { InvoiceReopenItem },
  data(){
    return{
      astList: status.reopenInvoiceList,
      activeKey: status.reopenInvoiceList[0].key,
      timer:null,

      invoiceVisible: false,   //申请重开弹层
      toggleSearchStatus: false,
      filterList: {
        time: []
      },
      loading: false,  //表格加载
      //表格分页
      page: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        totalPage: 0, // 总页数
        totalCount: 0, // 总条数
        params: {}, // 查询参数对象
        list: [], // 数据
      },
      tableData: [],
      columns: [
        {
          title: '受票方',
          dataIndex: 'taxTitle',
          width: 200,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '开票方',
          dataIndex: 'entName',
          ellipsis: true,
          width: 200,
          align: 'center'
        },
        {
          title: '开票类目',
          dataIndex: 'invoiceType',
          ellipsis: true,
          width: 150,
          align: 'center'
        },
        {
          title: '开票金额',
          dataIndex: 'amount',
          customRender: (text,record) => {
            if (text){
              return Math.round(text * 100)/10000 + '元'
            }
          },
          ellipsis: true,
          width: 100,
          align: 'center'
        },
        {
          title: '已退金额',
          dataIndex: 'returnAmountTotal',
          customRender: (text,record) => {
            if (text){
              return Math.round(text * 100)/10000 + '元'
            }
          },
          ellipsis: true,
          width: 100,
          align: 'center'
        },
        {
          title: '开票时间',
          dataIndex: 'taxDate',
          ellipsis: true,
          width: 170,
          align: 'center'
        },
      ],
      selectedRowKeys: [],  //批量发布数据
      selectedRows: [],  //批量数据对象
    }
  },
  // computed: {
  //   rowSelection() {
  //     return {
  //       onChange: (selectedRowKeys, selectedRows) => {
  //         this.selectedRowKeys = selectedRows;
  //       },
  //     };
  //   },
  // },
  mounted() {
    this.showtabs();//跳转到指定tab
    // this.getTableData();
  },
  methods:{
    //查询展开收起
    handleToggleSearch(){
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },
    //查询
    handleSearch(){
      this.page.currentPage = 1;
      this.getTableData();
    },
    //重置
    handleReset(){
      this.page.currentPage = 1;
      this.filterList = {};//清空查询条件
      this.getTableData();//重置列表
    },
    //申请重开
    invioceReopen(){
      this.getTableData();
      this.invoiceVisible = true;
    },
    //时间选择
    onChange(date, dateString) {
      this.filterList.taxDateStart =dateString[0];
      this.filterList.taxDateEnd =dateString[1];
    },
    //
    onSelectChange (selectedRowKeys,selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    //确定
    sure(){
      if(this.selectedRowKeys.length > 0){
        let entId = this.selectedRows[0].entId;
        let id = this.selectedRows[0].id;

        //跳转申请重开页面携带企业id
        this.$router.push({
          path: '/invoice/applyInvoiceReopen',
          query:{
            bizId: entId,
            detailsId: id,
          }
        })
      }else{
        this.$message.warning('选择项不能为空');
      }
    },
    //选择页数
    onPageChange(newPage) {
      this.page.currentPage = newPage;
      this.getTableData()
    },
    // 页面变化
    onSizeChange(current, newSize) {
      this.page.pageSize = newSize;
      this.getTableData()
    },
    //取消
    cancleTicket(){
      this.invoiceVisible = false;
    },
    //首次获取表格数据
    getTableData(){
      this.loading = true;
      let params = {};
      params.data = this.filterList;
      params.data.status = 1;  // 1 新开票 2 退票 3 退票-错票
      params.data.bizStatus = 420;  //包含107-110、307-310
      params.data.existsNoFinishReturnTax = false;   //是否存在未完成的部分退票 true 存在 false 不存在

      params.pageNo = this.page.currentPage;
      params.pageSize = this.page.pageSize;

      getTaxInvoiceList(params).then(res => {
        if (res.success) {
          const data = res.result || {};
          // 赋值表格数据
          this.tableData = data.records || [];
          // 赋值总条数
          this.page.totalCount = data.total || 0;
          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    callback(key){
      this.timer = new Date().getTime();
    },
    showtabs(){
      if (this.$route.query.pagetab){
        this.activeKey = this.$route.query.pagetab;
      }
    },
  }
}
</script>

<style scoped lang="less">
.main_content{
  color: @color-smudge;
}

h3,h4{
  font-weight: bolder;
}
h3{
  font-size: 20px;
}
h4{
  font-size: 18px;
  margin-bottom: 20px;
}

.header_invioce{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer_invoice{
  width: 100%;
  margin-top: 30px;
  text-align: center;
}
</style>
